<template>
	<view class="container">
		<view class="header" v-if="result.bazi_info">
			<view class="date">
				<view class="">
					{{result.base_info.gongli.substring(0,4)}}年
				</view>
				<view class="">
					{{getContentBetween(result.base_info.gongli,'年','月')}}月
				</view>
				<view class="">
					{{getContentBetween(result.base_info.gongli,'月','日')}}日
				</view>
				<view class="">
					{{getContentBetween(result.base_info.gongli,'日','时')}}时{{getContentBetween(result.base_info.gongli,'时','分')}}分
				</view>
			</view>
			<view class="row">
				<view class="" :style={color:colors[result.bazi_info.bazi[0][0]]}>
					{{result.bazi_info.bazi[0][0]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[1][0]]}>
					{{result.bazi_info.bazi[1][0]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[2][0]]}>
					{{result.bazi_info.bazi[2][0]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[3][0]]}>
					{{result.bazi_info.bazi[3][0]}}
				</view>
			</view>
			<view class="row">
				<view class="" :style={color:colors[result.bazi_info.bazi[0][1]]}>
					{{result.bazi_info.bazi[0][1]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[1][1]]}>
					{{result.bazi_info.bazi[1][1]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[2][1]]}>
					{{result.bazi_info.bazi[2][1]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[3][1]]}>
					{{result.bazi_info.bazi[3][1]}}
				</view>
			</view>
		</view>
		<view class="des">
			<view class="title">
				名人简介
			</view>
			<textarea v-model="params.deed" maxlength="200" placeholder-style="color:rgb(192, 196, 204);font-size:30rpx"
				placeholder="请输入" class="textarea" />
		</view>
		<view class="detail">
			<view class="title">
				大运流年详细事迹
			</view>
			<view class="content">
				<view class="item" v-for="(item,i) in list">
					<view class="p-item" @click="toggle(item,i)">
						<u-icon name="play-right" size="40" color="#42b983"
							:class="item.open?'sanjiao open':'sanjiao'"></u-icon>
						<view class="text">
							{{item.year}} {{item.des}}
						</view>
						<view class="line" :style="{height:lineHeight['line'+i]}" v-show="item.open">

						</view>
					</view>
					<view :class="'c-list'+i" v-show="item.open">
						<view class="c-item" v-for="row in item.children">
							<view class="top" @click="toggleTextarea(row,i)">
								<view class="c-circle">
									<view class="xian">

									</view>
									<view class="yuan">

									</view>
								</view>
								<view class="text">
									{{row.year}} {{row.des}}
								</view>
							</view>
							<textarea v-model="row.content" maxlength="200" v-show="row.show"
								placeholder-style="color:rgb(192, 196, 204);font-size:30rpx" placeholder="请输入"
								class="textarea-item" />
						</view>
						<!-- <view class="c-item">
							<view class="top">
								<view class="c-circle">
									<view class="xian">

									</view>
									<view class="yuan">

									</view>
								</view>
								<view class="text">
									2024甲辰流年
								</view>
							</view>

						</view> -->
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import {
		$http,
		address,
		timestampToDateTime,
		textColors,
		getWxPaySign,
		initBaiduStatistics
	} from "@/common"
	onNavigationBarButtonTap((e) => {
		let res = []
		list.value.forEach(item => {
			item.children.forEach(row => {
				if (row.content) {
					const years = res.map(n => n.title)
					console.log(years, item, 'mlml')
					if (!years.includes(item.year + ' ' + item.des)) {
						const children = item.children.filter(item => item.content).map(item => {
							return {
								title: item.year + ' ' + item.des,
								content: item.content
							}
						})
						res.push({
							title: item.year + ' ' + item.des,
							content: '',
							children: children
						})
					}
				}
			})
		})
		params.fortunes = res
		//console.log(params.fortunes,'params.fortunes')
		if (!params.deed) {
			uni.showToast({
				title: '请输入名人简介!',
				icon: 'none'
			})
			return
		}
		if (params.fortunes.length == 0) {
			uni.showToast({
				title: '请填写流年事件!',
				icon: 'none'
			})
			return
		}
		console.log(res, 'mmmmmm', params)
		$http.post('wikiSubmit', params).then(res => {
			console.log(res, 'res')
			uni.showToast({
				title: '提交成功!',
				icon: 'none'
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/baike/index'
				})
			}, 1000)
		})
	})
	const colors = ref(textColors)
	let result = ref({

	})
	const getContentBetween = (str, start, end) => {
		const regex = new RegExp(start + '(.*?)' + end, 's'); // 's' 允许 . 匹配换行符
		const match = str.match(regex);
		return match ? match[1] : ''; // 如果没有匹配返回空字符串
	}
	const getLiuNian = (year) => {
		let tiangan = ['', '甲', '乙', '丙', '丁', '戊', '巳', '庚', '辛', '壬', '癸']
		let dizhis = ['亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌']
		let res = tiangan[(Math.floor(year - 3) % 10)] + dizhis[(year - 3) % 12] + '流年'
		return res
	}
	const getChildArr = (start, end) => {
		let res = []
		for (let i = start; i <= end; i++) {
			res.push({
				year: i,
				des: getLiuNian(i),
				content: '',
				show: false
			})
		}
		return res
	}
	const getList = (arr1, arr2, arr3) => {
		const startYear = result.value.base_info.gongli.substring(0, 4)
		arr1.unshift(startYear)
		arr2.unshift(arr1[1] - 1)
		arr3 = arr3.map(item => item + '大运')
		console.log(arr3, 'arr3')
		arr3.unshift('起运前')

		const res = []
		for (let i = 0; i < 11; i++) {
			const childArr = getChildArr(arr1[i], arr2[i])
			res.push({
				year: arr1[i] + '-' + arr2[i],
				des: arr3[i],
				open: false,
				children: childArr
			})
		}
		return res
	}
	const params = reactive({
		wikiId: '',
		deed: '',
		fortunes: []
	})
	onReady(() => {

	})
	const list = ref([])
	const title = ref('')
	onMounted(() => {
		// #ifdef H5
		setTimeout(() => {
			let a = document.getElementsByClassName("uni-page-head__title")[0]
			a.textContent = title.value
			document.title = "幸运指南"
		})
		// #endif
	})
	
	onLoad((options) => {
		
			title.value = options.name
			params.wikiId = Number(options.id)
			$http.get('baziInfo',{qiPanId:options.qiPanId}).then(res=>{
				result.value = JSON.parse(res.result)
				list.value = getList(result.value.dayun_info.big_start_year, result.value.dayun_info
					.big_end_year, result
					.value.dayun_info
					.big)
			})
		// #ifdef H5
		getWxPaySign('六爻起卦', '专业好用的八字软件;支持手机和电脑使用;让易学数据世代相传。')
		// #endif
	})
	onShow(() => {
		
	})
	const open = ref(false)
	const lineHeight = reactive({
		line0: 0,
		line1: 0,
		line2: 0,
		line3: 0,
		line4: 0,
		line5: 0
	})
	const toggle = (item, i) => {
		item.open = !item.open
		if (item.open) {
			nextTick(() => {
				// #ifdef APP-PLUS
				   let query = uni.createSelectorQuery()
				// #endif
				// #ifdef H5
				   let query = uni.createSelectorQuery().in(this)
				// #endif
				query.select('.c-list' + i).boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						console.log('元素高度:', data.height);
						// #ifdef APP-PLUS
						   lineHeight['line' + i] = data.height + 'px'
						// #endif
						
						// #ifdef H5
						   lineHeight['line' + i] = data.height +'px'
						// #endif
					}
				}).exec()
				console.log(lineHeight, 'lineHeight')
			})
		}
	}
	const toggleTextarea = (row, i) => {
		row.show = !row.show
		//if (row.show) {
			nextTick(() => {
				// #ifdef APP-PLUS
				   let query = uni.createSelectorQuery()
				// #endif
				// #ifdef H5
				   let query = uni.createSelectorQuery().in(this)
				// #endif
				console.log(query,'query')
				query.select('.c-list' + i).boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						console.log('元素高度:', data.height);
						// #ifdef APP-PLUS
						   lineHeight['line' + i] = data.height + 'px'
						// #endif
						
						// #ifdef H5
						   lineHeight['line' + i] = data.height  +'px'
						// #endif
					}
				}).exec()
				console.log(lineHeight, 'lineHeight')
			})
		//}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;

		.header {
			padding: 20rpx 100rpx;

			.date {
				display: flex;
				justify-content: space-between;
				color: #C0C0C0;

				view {
					flex: 1;
					text-align: center;
				}
			}

			.row {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;

				view {
					font-size: 44rpx;
					flex: 1;
					text-align: center;
				}
			}
		}

		.des {
			.title {
				background-color: #EDF8ED;
				padding: 20rpx;
				font-size: 32rpx;
				color: #42b983;
				font-weight: bold;
			}

			.textarea {
				width: 700rpx;
				border: 1rpx solid #ccc;
				padding: 10rpx;
				margin: 20rpx auto;
			}
		}

		.detail {
			.title {
				background-color: #EDF8ED;
				padding: 20rpx;
				font-size: 32rpx;
				color: #42b983;
				font-weight: bold;
			}

			.content {
				padding: 30rpx;

				.item {
					margin: 20rpx 0;

					.p-item {
						display: flex;
						position: relative;

						.sanjiao {
							margin-right: 20rpx;
						}

						.open {
							transform: rotate(90deg);
						}
					}

					.line {
						position: absolute;
						top: 32rpx;
						left: 20rpx;
						width: 2rpx;
						height: 292rpx;
						background-color: #42b983;
					}
				}

				.c-item {
					padding-left: 22rpx;

					.top {
						display: flex;
						margin: 10rpx 0;
					}

					.c-circle {
						display: flex;
						align-items: center;

						.xian {
							width: 50rpx;
							height: 2rpx;
							background-color: #42b983;
						}

						.yuan {
							width: 20rpx;
							height: 20rpx;
							border: 1rpx solid #42b983;
							border-radius: 50%;
						}
					}

					.text {
						margin-left: 10rpx;
					}

					.textarea-item {
						width: 580rpx;
						height: 200rpx;
						border: 1rpx solid #ccc;
						padding: 10rpx;
						margin-left: 28rpx;
					}
				}
			}
		}
	}
</style>